<template>
  <div class="shopping-cart">
    <div class="product-list" v-if="cartList.length != 0">
      <swipe-cell v-for="(item,index) in cartList" :key="index">
        <div class="item">
          <product-item :cover="staticHost+item.goodsImg">
            <div class="product-info" slot="product-item">
              <p class="name">{{item.goodsName}}</p>
              <div class="specification">
                <p>{{item.size}}</p>
                <!-- <p>（库存：999组）</p> -->
              </div>
              <div class="operation">
                <p class="delete">￥{{item.price}}</p>
                <p class="price">
                  <span>￥</span>
                  <span>{{item.presentPrice}}</span>
                </p>
                <p class="stepper">
                  <stepper button-size="23px" v-model="item.number" @change="onStepperChange" />
                </p>
              </div>
            </div>
          </product-item>
        </div>
        <template slot="right">
          <van-button type="danger" text="删除" @click="deleteFromCart(item.id)" />
        </template>
      </swipe-cell>
    </div>
    <div v-if="cartList.length != 0">
      <submit-bar
        :price="addGoodsTotalPrice"
        button-text="结算"
        @submit="onSubmit"
        button-type="info"
      />
    </div>

    <div class="no-cart" v-if="cartList.length == 0">
      <p>
        <img src="../img/我要进货@2x.png" alt />
      </p>
      <p>购物车还没有商品</p>
      <div class="submit">
        <van-button type="info" size="large" @click="goToShoppingMall">去选择</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import productItem from "../components/product_item.vue";
import { Stepper, SubmitBar, Button, SwipeCell, Toast } from "vant";
import { staticHost } from "../service/HOST.js";

export default {
  components: {
    productItem,
    Stepper,
    SubmitBar,
    vanButton: Button,
    SwipeCell
  },
  data() {
    return {
      value: "",
      cartList: [],
      staticHost
    };
  },
  computed: {
    addGoodsTotalPrice() {
      let price = 0;
      if (this.cartList.length) {
        this.cartList.forEach(item => {
          price += item.presentPrice * item.number;
        });
      }
      return price * 100;
    }
  },
  mounted() {
    // this.cartList 初始化
    this.cartList = localStorage.getItem("addCart")
      ? JSON.parse(localStorage.getItem("addCart"))
      : [];
  },
  methods: {
    // 直购类商品 结算
    onSubmit() {
      this.$router.push({
        path: "/settlement",
        query: {
          shopType: "normalAdd"
        }
      });
    },
    // 购物车商品数量发生变化时
    onStepperChange() {
      // 更新localStorage里的值
      this.saveCartToStorage();
    },
    // 持久化储存 购物车
    saveCartToStorage() {
      localStorage.setItem("addCart", JSON.stringify(this.cartList));
    },
    deleteFromCart(id) {
      let index = _.findIndex(this.cartList, o => {
        return o.id == id;
      });
      this.cartList.splice(index, 1);

      // 更新localStorage里的值
      this.saveCartToStorage();

      Toast.success("删除成功");
    },
    //跳转到商城
    goToShoppingMall() {
      this.$router.replace({
        path: "/home/shopping_mall"
      });
    }
  }
};
</script>


<style scoped>
.shopping-cart {
  padding-bottom: 50px;
}

.product-list {
  /* background-color: #fff; */
}

.product-info {
  padding-left: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-info > div:last-child {
  flex: 1;
  /* display: flex; */
  /* align-items: flex-end; */
}

.name {
  color: #423d43;
}

.specification {
  display: flex;
  font-size: 0.9rem;
}

.specification > p:last-child {
  /* padding-left: 10px; */
}

.operation {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* align-items: center; */
  position: relative;
}

.price {
  color: var(--money-up);
}

.delete {
  text-decoration: line-through;
  color: #adadad;
  font-size: 0.9rem;
  padding-left: 5px;
}

.stepper{
  position: absolute;
  right: 0;
  bottom: 0;
}

.no-cart {
  margin-top: 20%;
  text-align: center;
}

.no-cart img {
  width: 120px;
  height: 120px;
}

.no-cart .submit {
  margin-top: 0;
  padding: 10px 70px;
}
</style>

<style>
.shopping-cart .van-button {
  height: 100%;
}

.shopping-cart .product-item {
  padding: 10px;
  background-color: #fff;
}

.shopping-cart .item {
  /* margin-bottom: 2px; */
}
</style>